<template>
  <page-container title="今日推荐">
	<scroll-view class="bill-container" scroll-y>
		<!-- 内容区域 -->
		<view class="page-content">
			<!-- 顶部banner -->
			<view class="banner">
				<image src="https://picsum.photos/800/300" mode="aspectFill"></image>
			</view>
	
			<!-- 分类列表 -->
			<view class="category-list">
	
				<view v-for="(category, index) in categories" :key="index" class="category-item">
					<image :src="category.image" mode="aspectFill" class="category-image"></image>
					<view class="category-box">
						<!-- 分类标题栏 -->
						<view class="category-header">
							<text class="category-title">{{category.title}}</text>
							<!-- <text class="iconfont icon-more"></text> -->
						</view>
	
						<!-- 分类商品列表 -->
						<view class="shop-list">
							<view v-for="(shop, shopIndex) in category.shops" :key="shopIndex" class="shop-item"
								@click="gotoStore(shop, category.testData,shopIndex)">
								<image :src="shop.image" mode="aspectFill" class="shop-image"></image>
								<view class="shop-info">
	
									<view class="shop-meta">
										<text class="shop-name">{{shop.name}} </text>
										<text class="">{{shop.distance}}</text>
									</view>
									<view class="shop-meta">
										<text class="person-price">人均:{{shop.personNum}}</text>
										<text class="price">月售:{{shop.averagePrice}}</text>
										<text class="distance">积分抵扣:</text>
										<text class="discount">{{shop.discount}}</text>
									</view>
								</view>
							</view>
						</view>
	
					</view>
	
	
	
				</view>
			</view>
		</view>
	
		<view class="nullBox"></view>
	
	</scroll-view>
		
  </page-container>
</template>

<script lang="ts" src="./index.ts">

</script>

<style lang="scss" scoped>


	.bill-container {
		height: calc(100vh - 170rpx);
		position: relative;
		z-index: 11;
	}


	.banner {
		position: relative;
		z-index: 1;
		width: 100%;
		height: 110px;
		padding: 0 12px;
		margin-bottom: 8px;

		image {
			width: 100%;
			height: 100%;
			border-radius: 8px;
		}
	}

	.category-list {
		position: relative;
		z-index: 1;
		padding: 0 12px;

		.category-item {
			background-color: #fff;
			border-radius: 8px;
			margin-bottom: 8px;
			padding: 10px;
			display: flex;
			background: #ffffff;
			border-radius: 6px;
			box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.16);

			.category-image {
				width: 168rpx;
				min-width: 168rpx;
				max-width: 168rpx;
				height: 314rpx;
				margin-right: 20rpx;
			}

			.category-box {
				flex: 1;
			}

			.category-header {
				width: 94%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 12px;

				.category-title {
					font-size: 16px;
					font-weight: 500;
					color: #333;
				}

				.iconfont {
					font-size: 14px;
					color: #999;
				}
			}
		}
	}

	.shop-list {
		.shop-item {
			display: flex;
			padding: 4rpx 0;

			// &:not(:last-child) {
			//   border-bottom: 0.5px solid #f5f5f5;
			// }

			.shop-image {
				width: 76rpx;
				height: 76rpx;
				border-radius: 4px;
				margin-right: 12px;
			}

			.shop-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.shop-name {
					font-size: 24rpx;
					color: #000;
					margin-bottom: 4px;
					width: 300rpx;
					// 文字超出显示省略号
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.shop-meta {
					display: flex;
					align-items: center;
					font-size: 20rpx;
					color: #646464;

					text {
						margin-right: 8px;

						&.person-price {
							color: #646464;
						}

						&.price {
							color: #646464;
						}

						&.distance {
							color: #646464;
						}

						&.discount {
							color: #ff4444;
							background-color: #fff1f1;
							padding: 2px 4px;
							border-radius: 2px;
							font-size: 10px;
							margin-right: 0;
						}
					}
				}
			}
		}
	}

	.page-content {
		position: relative;
		width: 100%;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 200px;
			background: linear-gradient(180deg, #e8f7f3 0%, rgba(232, 247, 243, 0) 100%);
			z-index: 0;
		}
	}

	.nullBox {
		width: 100%;
		height: 80rpx;
	}
</style> 